import { FC } from "react";
import styles from "./index.module.less";
import FooterCard from "./FooterCard";
import { CurrentKey } from "../../context/BigScreenContext";
interface ICard {
  title: string;
  currentKey: CurrentKey;
}

const Footer: FC = () => {
  const leftList: ICard[] = [
    {
      title: "智能问答问数",
      currentKey: "question",
    },
    {
      title: "异常预警",
      currentKey: "anomaly",
    },
  ];

  const rightList: ICard[] = [
    {
      title: "操作参数优化",
      currentKey: "param",
    },
    {
      title: "操作路径优化",
      currentKey: "path",
    },
  ];
  return (
    <>
      <div className={styles["footer"]}>
        <div className={styles["left-area"]}>
          {leftList.map((item) => (
            <FooterCard
              key={item.title}
              title={item.title}
              currentKey={item.currentKey}
            ></FooterCard>
          ))}
        </div>
        <div className={styles["center-block"]}></div>

        <div className={styles["right-area"]}>
          {rightList.map((item) => (
            <FooterCard
              key={item.title}
              title={item.title}
              currentKey={item.currentKey}
            ></FooterCard>
          ))}
        </div>
      </div>
    </>
  );
};

export default Footer;
